<template>
  <div class="app-container">
    <div style="display:flex;">
      <div style="margin-right: 20px">
        <div class="mes-route">
            <el-menu text-color="#464646" text-size="20px"
                     active-text-color="#fff" @select="handleMenuItemClick" default-active="1" style="font-size: 50px;  border-radius: 20px;">
              <el-menu-item index="1" class="mes-menu-item1">
                <img v-if="menuIndex !== '1'" src="@/assets/images/button-icon1-no.png" width="20px" height="20px" alt="dark" style="margin-right: 5px">
                <img v-if="menuIndex === '1'" src="@/assets/images/button-icon1-yes.png" width="20px" height="20px" alt="dark" style="margin-right: 5px">直角坐标机器人1号
              </el-menu-item>
              <el-menu-item index="2" class="mes-menu-item1">
                <img v-if="menuIndex !== '2'" src="@/assets/images/button-icon2-no.png" width="20px" height="20px" alt="dark" style="margin-right: 5px">
                <img v-if="menuIndex === '2'" src="@/assets/images/button-icon2-yes.png" width="20px" height="20px" alt="dark" style="margin-right: 5px">直角坐标机器人2号
              </el-menu-item>
              <el-menu-item index="3" class="mes-menu-item1">
                <img v-if="menuIndex !== '3'" src="@/assets/images/button-icon3-no.png" width="20px" height="17px" alt="dark" style="margin-right: 5px">
                <img v-if="menuIndex === '3'" src="@/assets/images/button-icon3-yes.png" width="20px" height="17px" alt="dark" style="margin-right: 5px">相机1号
              </el-menu-item>
              <el-menu-item index="4" class="mes-menu-item1">
                <img v-if="menuIndex !== '4'" src="@/assets/images/button-icon3-no.png" width="20px" height="17px" alt="dark" style="margin-right: 5px">
                <img v-if="menuIndex === '4'" src="@/assets/images/button-icon3-yes.png" width="20px" height="17px" alt="dark" style="margin-right: 5px">相机2号
              </el-menu-item>
              <el-menu-item index="5" class="mes-menu-item1">
                <img v-if="menuIndex !== '5'" src="@/assets/images/button-icon4-no.png" width="20px" height="20px" alt="dark" style="margin-right: 5px">
                <img v-if="menuIndex === '5'" src="@/assets/images/button-icon4-yes.png" width="20px" height="20px" alt="dark" style="margin-right: 5px">协作机器人
              </el-menu-item>

            </el-menu>
        </div>
        <div v-if="menuIndex === '1'" class="mes-route" style="margin-top: 20px;padding:20px;">
          <div style="display: flex;align-items: center"><div style="width: 5px;height: 15px;background: #3193FF;border-radius: 3px;margin-right: 5px"></div>直角坐标机器人1号属性</div>
          <div style="display: flex;align-items: center;margin-top: 10px">• 运动速度：</div>
          <el-input style="margin-top: 5px" placeholder="x轴"></el-input>
          <el-input style="margin-top: 5px" placeholder="Y轴"></el-input>
          <el-input style="margin-top: 5px" placeholder="Z轴"></el-input>
          <div style="display: flex;align-items: center;margin-top: 10px">• 运动模式：</div>
          <el-input style="margin-top: 7px" placeholder="手动"></el-input>
          <div style="display: flex;align-items: center;margin-top: 10px">• 运动限位：</div>
          <el-input style="margin-top: 7px" placeholder="1"></el-input>
          <el-button type="primary" style="width: 100%;margin-top: 10px">确定</el-button>
        </div>
        <div v-if="menuIndex === '2'" class="mes-route" style="margin-top: 20px;padding:20px;">
          <div style="display: flex;align-items: center"><div style="width: 5px;height: 15px;background: #3193FF;border-radius: 3px;margin-right: 5px"></div>直角坐标机器人2号属性</div>
          <div style="display: flex;align-items: center;margin-top: 10px">• 运动速度：</div>
          <el-input style="margin-top: 5px" placeholder="x轴"></el-input>
          <el-input style="margin-top: 5px" placeholder="Y轴"></el-input>
          <el-input style="margin-top: 5px" placeholder="Z轴"></el-input>
          <div style="display: flex;align-items: center;margin-top: 10px">• 运动模式：</div>
          <el-input style="margin-top: 7px" placeholder="手动"></el-input>
          <div style="display: flex;align-items: center;margin-top: 10px">• 运动限位：</div>
          <el-input style="margin-top: 7px" placeholder="1"></el-input>
          <el-button type="primary" style="width: 100%;margin-top: 10px">确定</el-button>
        </div>
        <div v-if="menuIndex === '3'" class="mes-route" style="margin-top: 20px;padding:20px;">
          <div style="display: flex;align-items: center"><div style="width: 5px;height: 15px;background: #3193FF;border-radius: 3px;margin-right: 5px"></div>相机1号属性</div>
          <div style="display: flex;align-items: center;margin-top: 10px">• 曝光时间：</div>
          <el-input style="margin-top: 5px" placeholder="24s"></el-input>
          <div style="display: flex;align-items: center;margin-top: 10px">• 快门时间：</div>
          <el-input style="margin-top: 7px" placeholder="3s"></el-input>
          <div style="display: flex;align-items: center;margin-top: 10px">• 颜色模式：</div>
          <el-input style="margin-top: 7px" placeholder="rgb"></el-input>
          <div style="display: flex;align-items: center;margin-top: 10px">• 自动增益：</div>
          <el-input style="margin-top: 7px" placeholder="自动增益"></el-input>
          <el-button type="primary" style="width: 100%;margin-top: 15px">确定</el-button>
        </div>
        <div v-if="menuIndex === '4'" class="mes-route" style="margin-top: 20px;padding:20px;">
          <div style="display: flex;align-items: center"><div style="width: 5px;height: 15px;background: #3193FF;border-radius: 3px;margin-right: 5px"></div>相机2号属性</div>
          <div style="display: flex;align-items: center;margin-top: 10px">• 曝光时间：</div>
          <el-input style="margin-top: 5px" placeholder="24s"></el-input>
          <div style="display: flex;align-items: center;margin-top: 10px">• 快门时间：</div>
          <el-input style="margin-top: 7px" placeholder="3s"></el-input>
          <div style="display: flex;align-items: center;margin-top: 10px">• 颜色模式：</div>
          <el-input style="margin-top: 7px" placeholder="rgb"></el-input>
          <div style="display: flex;align-items: center;margin-top: 10px">• 自动增益：</div>
          <el-input style="margin-top: 7px" placeholder="自动增益"></el-input>
          <el-button type="primary" style="width: 100%;margin-top: 15px">确定</el-button>
        </div>
        <div v-if="menuIndex === '5'" class="mes-route" style="margin-top: 20px;padding:20px;">
          <div style="display: flex;align-items: center"><div style="width: 5px;height: 15px;background: #3193FF;border-radius: 3px;margin-right: 5px"></div>协作机器人属性</div>
          <div style="display: flex;align-items: center;margin-top: 10px">• 运动速度：</div>
          <el-input style="margin-top: 5px" placeholder="x轴"></el-input>
          <el-input style="margin-top: 5px" placeholder="Y轴"></el-input>
          <el-input style="margin-top: 5px" placeholder="Z轴"></el-input>
          <div style="display: flex;align-items: center;margin-top: 10px">• 运动模式：</div>
          <el-input style="margin-top: 7px" placeholder="手动"></el-input>
          <div style="display: flex;align-items: center;margin-top: 10px">• 运动限位：</div>
          <el-input style="margin-top: 7px" placeholder="1"></el-input>
          <el-button type="primary" style="width: 100%;margin-top: 10px">确定</el-button>
        </div>
      </div>
      <div style="width: 100%">
        <div class="mes-head">
          <el-menu ref="elMenu" text-color="#464646" text-size="20px"
                   active-text-color="#fff" @select="handleMenuItemClick2"  style="font-size: 50px;  border-radius: 20px;display: flex">
            <el-menu-item index="1" class="mes-menu-item2">
              <img v-if="menuIndex2 !== '1'" src="@/assets/images/zj-no.png" width="17px" height="17px" alt="dark" style="margin-right: 5px">
              <img v-if="menuIndex2 === '1'" src="@/assets/images/zj-yes.png" width="17px" height="17px" alt="dark" style="margin-right: 5px">自检
            </el-menu-item>
            <el-menu-item index="2" class="mes-menu-item2">
              <img v-if="menuIndex2 !== '2'" src="@/assets/images/sbgl-no.png" width="17px" height="17px" alt="dark" style="margin-right: 5px">
              <img v-if="menuIndex2 === '2'" src="@/assets/images/sbgl-yes.png" width="17px" height="17px" alt="dark" style="margin-right: 5px">设备管理
            </el-menu-item>
            <el-menu-item index="3" class="mes-menu-item2">
              <img v-if="menuIndex2 !== '3'" src="@/assets/images/yx-no.png" width="17px" height="17px" alt="dark" style="margin-right: 5px">
              <img v-if="menuIndex2 === '3'" src="@/assets/images/yx-yes.png" width="17px" height="17px" alt="dark" style="margin-right: 5px">运行
            </el-menu-item>
            <el-menu-item index="4" class="mes-menu-item2">
              <img v-if="menuIndex2 !== '4'" src="@/assets/images/fw-no.png" width="20px" height="17px" alt="dark" style="margin-right: 5px">
              <img v-if="menuIndex2 === '4'" src="@/assets/images/fw-yes.png" width="20px" height="17px" alt="dark" style="margin-right: 5px">复位
            </el-menu-item>

          </el-menu>
        </div>
        <div class="mes-head2" v-if="!box1">
          <img v-if="!showwebp1 && menuIndex === '1'" src="@/assets/images/jqr1-img.png" width="800px" height="700px" alt="dark" style="margin-right: 5px">
          <img v-if="showwebp1 && menuIndex === '1'" src="@/assets/images/jqr1-webp.webp" width="800px" height="700px" alt="dark" style="margin-right: 5px">

          <img v-if="!showwebp2 && menuIndex === '2'" src="@/assets/images/jqr2-img.png" width="800px" height="700px" alt="dark" style="margin-right: 5px">
          <img v-if="showwebp2 && menuIndex === '2'" src="@/assets/images/jqr2-webp.webp" width="800px" height="700px" alt="dark" style="margin-right: 5px">

          <img v-if="!showwebp5 && menuIndex === '5'" src="@/assets/images/xzjqr-img.png" width="800px" height="700px" alt="dark" style="margin-right: 5px">
          <img v-if="showwebp5 && menuIndex === '5'" src="@/assets/images/xzjqr-webp.webp" width="800px" height="700px" alt="dark" style="margin-right: 5px">

        </div>
        <div v-if="box1" class="mes-head3">
          <div style="display: flex;justify-content: center">
            <div class="mes-box">
              <img src="@/assets/images/jqr1.png" width="158px" height="126px" alt="dark">
              <Progress style="width: 400px" :progress="progress1"/>
              <span>直角坐标机器人1号<span v-if="progress1 === 100" style="color: #3AB95C">（自检完成）</span></span>
              <img v-if="progress1 === 100" class="mes-box-img" src="@/assets/images/success-loding.png" width="108px" height="108px" alt="dark">
            </div>
            <div class="mes-box">
              <img src="@/assets/images/jqr2.png" width="126px" height="136px" alt="dark">
              <Progress style="width: 400px" :progress="progress2"/>
              <span>直角坐标机器人2号<span v-if="progress2 === 100" style="color: #3AB95C">（自检完成）</span></span>
              <img  v-if="progress2 === 100" class="mes-box-img" src="@/assets/images/success-loding.png" width="108px" height="108px" alt="dark">
            </div>
            <div class="mes-box">
              <img src="@/assets/images/xzjqr.png" width="142px" height="126px" alt="dark">
              <Progress style="width: 400px" :progress="progress3"/>
              <span>协作机器人<span v-if="progress3 === 100" style="color: #3AB95C">（自检完成）</span></span>
              <img  v-if="progress3 === 100" class="mes-box-img" src="@/assets/images/success-loding.png" width="108px" height="108px" alt="dark">
            </div>
          </div>
          <div style="display: flex;justify-content: center">
            <div class="mes-box2">
              <img src="@/assets/images/xj.png" width="153px" height="106px" alt="dark">
              <Progress style="width: 550px" :progress="progress4"/>
              <span>相机1号<span v-if="progress4 === 100" style="color: #3AB95C">（自检完成）</span></span>
              <img  v-if="progress4 === 100" class="mes-box-img" src="@/assets/images/success-loding.png" width="108px" height="108px" alt="dark">
            </div>
            <div class="mes-box2">
              <img src="@/assets/images/xj.png" width="153px" height="106px" alt="dark">
              <Progress style="width: 550px" :progress="progress5"/>
              <span>相机2号<span v-if="progress5 === 100" style="color: #3AB95C">（自检完成）</span></span>
              <img  v-if="progress5 === 100" class="mes-box-img" src="@/assets/images/success-loding.png" width="108px" height="108px" alt="dark">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Progress from '@/components/TaskProgress'
export default {
  name: "equipment",
  components: {Progress},
  data() {
    return {
      menuIndex:"1",
      menuIndex2:"",
      showwebp1:false,
      showwebp2:false,
      showwebp3:false,
      showwebp4:false,
      showwebp5:false,
      box1: false,
      progress1: 0,
      progress2: 0,
      progress3: 0,
      progress4: 0,
      progress5: 0,
      timerId:null,
    }
  },
  methods:{
    handleMenuItemClick(index){
      if(this.menuIndex !== index){
        this.showwebp1 = false;
        this.showwebp2 = false;
        this.showwebp3 = false;
        this.showwebp4 = false;
        this.showwebp5 = false;
        this.menuIndex2 = "";
        this.box1 = false;
        this.$refs.elMenu.activeIndex = null
      }
      this.menuIndex = index;
    },
    handleMenuItemClick2(index){
      if(index === '1'){
        this.box1 = true;
        this.inspectClick();
      }else if(index === '2'){
        this.box1 = false;
      }else if(index === '3'){
        this.box1 = false;
        if(this.menuIndex === '1'){
          this.showwebp1 = true;
        }else if(this.menuIndex === '2'){
          this.showwebp2 = true;
        }else if(this.menuIndex === '5'){
          this.showwebp5 = true;
        }
      }else if(index === '4'){
        this.box1 = false;
        if(this.menuIndex === '1'){
          this.showwebp1 = false;
        }else if(this.menuIndex === '2'){
          this.showwebp2 = false;
        }else if(this.menuIndex === '5'){
          this.showwebp5 = false;
        }
      }
      this.menuIndex2 = index;
    },
    inspectClick() {
      this.timerId = setInterval(() => {
        if(this.progress1 < 100){
          this.progress1 = this.progress1 + 10;
        }else if(this.progress2 < 100){
          this.progress2 = this.progress2 + 10;
        }else if(this.progress3 < 100){
          this.progress3 = this.progress3 + 10;
        }else if(this.progress4 < 100){
          this.progress4 = this.progress4 + 10;
        }else if(this.progress5 < 100){
          this.progress5 = this.progress5 + 10;
        }
        if (this.progress1 === 100 && this.progress2 === 100 && this.progress3 === 100 && this.progress4 === 100 && this.progress5 === 100) {
          this.$modal.msgSuccess("全部自检完成");
          clearInterval(this.timerId);
        }
      }, 100);
      this.showOperation = true;
    },
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
.mes-route{
  width: 270px;
  height: 410px;
  background: #FFFFFF;
  border-radius: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  font-size: 16px;
  color: #212C37;
  font-family: Alibaba PuHuiTi;
}
.mes-head{
  width: 100%;
  height: 100px;
  background: #FFFFFF;
  border-radius: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

.mes-head2{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 720px;
  background: #FFFFFF;
  border-radius: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.mes-head3{
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  height: 720px;
  background: #FFFFFF;
  border-radius: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.mes-menu-item1.is-active {
  background-color: #3193FF !important;
  color: #fff;
  span {
    color: #fff !important;
  }
  border-radius: 5px;

}

.mes-menu-item1:hover, .mes-menu-item1:focus {
  outline: none;
  background-color: #e8f4ff;
  border-radius: 5px;
}
.mes-menu-item1 {
  margin: 22px 15px;
  border-radius: 5px;
  display: flex;
  align-items: center;
}

.mes-menu-item2 {
  width: 150px;
  text-align: center;
  margin: 22px 15px;
  border-radius: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.mes-menu-item2.is-active {
  background-color: #3193FF !important;
  color: #fff;
  span {
    color: #fff !important;
  }
  border-radius: 20px;

}

.mes-menu-item2:hover, .mes-menu-item2:focus {
  outline: none;
  background-color: #e8f4ff;
  border-radius: 20px;
}

.mes-box-img{
  position: absolute;
  top: 50px;
}
.mes-box {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 450px;
  height: 317px;
  background: #FFFFFF;
  border-radius: 10px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  margin: 10px 30px;
}

.mes-box span {
  font-family: Alibaba PuHuiTi;
  font-weight: 400;
  font-size: 16px;
  color: #212C37;
  margin-top: 50px;
}

.mes-box2 {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 623px;
  height: 317px;
  background: #FFFFFF;
  border-radius: 10px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  margin: 10px 30px;
}

.mes-box2 span {
  font-family: Alibaba PuHuiTi;
  font-weight: 400;
  font-size: 16px;
  color: #212C37;
  margin-top: 50px;
}
</style>
